<template>
  <div class="receiveBox" @click="handleClick">
    <div class="left">
      <NuxtImg src="/images/carteira/rebate_icon.png" />
    </div>
    <div class="right">
      <p>
        {{ lang.carteira_receive_title }}
        <span>{{ userStore.moneyUnit }}{{ money_1 }}</span>
        {{ lang.carteira_receive_text }}
        <span>{{ userStore.moneyUnit }}{{ money_2 }}</span>
      </p>
      <div class="rebateBottom">
        <div class="progress-wrapper">
          <div class="el-progress el-progress--line">
            <div class="el-progress-bar">
              <div class="el-progress-bar__outer" style="height: 8px">
                <div
                  class="el-progress-bar__inner"
                  :style="`width: ${progress}%;`"
                ></div>
              </div>
            </div>
          </div>
          <span class="custom-progress-text">{{ active }}/{{ total }}</span>
        </div>
        <div class="btn noCheck">{{ lang.carteira_receive_btn }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("carteira");

const userStore = useUserStore();

const money_1 = ref("40");
const money_2 = ref("1");

const total = ref(40);
const active = ref(10);
const progress = computed(() => {
  return (active.value / total.value) * 100;
});

const handleClick = () => {
  navigateTo({ name: "carteira-rebate" });
  userStore.changeShowCarteira(false);
};
</script>

<style scoped lang="scss">
.receiveBox {
  width: 100%;
  height: 2.2rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.4rem;
  padding: 0 0.27rem;
  background: #3e2e4b;
}
.receiveBox .left {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--box-bg-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.receiveBox .left img {
  width: 1.1rem;
  height: 1.1rem;
}
.receiveBox .right {
  width: 7rem;
}
.receiveBox .right p {
  font-size: 0.34rem;
  color: var(--theme-neutral1);
  margin-bottom: 0.3rem;
}
.receiveBox .right p span {
  color: #ffd700;
  font-size: 0.38rem;
  font-weight: 700;
}
.receiveBox .right .rebateBottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0.5rem;
}
.receiveBox .right .rebateBottom .progress-wrapper {
  position: relative;
  width: 4.2rem;
}
.el-progress {
  align-items: center;
  display: flex;
  line-height: 1;
  position: relative;
}
.el-progress-bar {
  box-sizing: border-box;
  flex-grow: 1;
}
.el-progress-bar__outer {
  background-color: #2c1d31;
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  background: #ffba00;
  border-radius: 100px;
  height: 100%;
  left: 0;
  line-height: 1;
  position: absolute;
  text-align: right;
  top: 0;
  transition: width 0.6s ease;
  white-space: nowrap;
}
.el-progress-bar__inner:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.receiveBox .right .rebateBottom .custom-progress-text {
  color: #c8680a;
  position: absolute;
  right: 0.2rem;
  bottom: 0;
  font-size: 0.36rem;
}
.receiveBox .btn {
  width: 2.4rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.38rem;
  border-radius: 0.2rem;
  text-align: center;
  color: #3b1d33;
  background: #ffd700;
}
</style>
